<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>图片滑动展示</title>
    <style type="text/css">
          html {
            font-family: "microsoft yahei,arial, helvetica, sans-serif";
            font-size: 16px;
            background-image: url('../images/10.jpg');
            /* 设置背景图片 */
            background-size: cover;
            /* 覆盖整个页面 */
            background-position: center;
            /* 居中显示 */
            background-attachment: fixed;
            /* 固定背景，不随滚动条滚动 */
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .auto {
            margin: 0 auto;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        /* 网页样式 */
        .top1 {
            height: 60px;
            background-color: rgb(200, 16, 16);
        }

        .top1 li {
            width: 150px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            float: left;
        }

        .top1 li a {
            color: #fff;
            display: block;
        }

        .top1 li a:hover {
            color: gold;
            font-weight: 700;
        }
        .top1 li a.active {
          color: gold;
          font-size: 20px;
          background-color: #ff6c6c;
          font-weight: 700;
        }
        /*  */
        #slide {
            width: 800px;
            height: 120px;
            /* 稍微增加高度以容纳描述 */
            margin: 0 auto;
            margin-top: 100px;
            /* border: 1px solid black; */
            overflow: hidden;
        }

        #content {
            width: 999999px;
        }

        .item {
            width: 160px;
            height: 120px;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            text-align: center;
            /* 居中对齐 */
        }

        .item img {
            width: 160px;
            height: 100px;
            display: block;
            /* 确保图片独占一行 */
        }

        .item .description {
            font-size: 12px;
            color: #333;
            margin-top: 5px;
            /* 与图片之间留点空间 */
        }

        #button {
            width: 100px; 
            margin: 20px auto;
        }
        
         .text-container {
            width: 60%;
            margin: 0 auto;
            padding: 40px;
            background-color: #f0f0f0;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }

        .text-container h2 {
            margin-top: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .item-container {
            display: flex;
            /* 使用Flexbox布局 */
            align-items: center;
            /* 垂直居中对齐 */
            margin-bottom: 30px;
            /* 每个组合之间的间隔 */
        }

        .image-container {
            width: 200px;
            /* 固定图片宽度 */
            margin-right: 20px;
            /* 图片与文字之间的间距 */
        }

        .image-container img {
            max-width: 100%;
            /* 图片宽度不超过容器宽度 */
            height: auto;
            /* 保持图片比例 */
        }

        .text-description {
            flex-grow: 1;
            /* 文字部分占用剩余空间 */
        }
    </style>
    <script>
        window.onload = function() {
        const navLinks = document.querySelectorAll('.top1 li a');
          // 为每个导航链接添加点击事件
          navLinks.forEach(link => {
            link.addEventListener('click', function() {
              // 移除所有链接的高亮样式      
              navLinks.forEach(link => {    
                link.classList.remove('active');    
              });   
              // 给当前点击的链接添加高亮样式   
              this.classList.add('active');  
            });  
          });
          navLinks[3].classList.add('active');
        }
      </script>
</head>

<body>
    <ul class="top1 auto clearfix">
        <li><a href="../index.html">首页</a></li>
        <li><a href="../part1/partone.html">鸦片战争</a></li>
        <li><a href="../part2/parttwo.html">辛亥革命</a></li>
        <li><a href="partthree.html">五四运动</a></li>
        <li><a href="../part4/Anti-JapaneseWar.html">抗日战争</a></li>
        <li><a href="../part5/partfive.html">中华人民共和国成立</a></li>
        <li style="float: right;"><a href="../part0/message.html">留言</a></li>
    </ul>
    <div class="sidebar">

    <div id="slide">
        <div id="content">
            <div class="item">
                <a href="#section1"><img src="../images/1.jpg" /></a>
                <div class="description">图片1描述</div>
            </div>
            <div class="item">
                <a href="#section2"></a><img src="../img/2.png" />
                <div class="description">图片2描述</div>
            </div>
            <div class="item">
                <a href="#section3"></a><img src="../img/3.png" />
                <div class="description">图片3描述</div>
            </div>
            <div class="item">
                <a href="#section4"></a><img src="../img/4.png" />
                <div class="description">图片4描述</div>
            </div>
            <div class="item">
                <a href="#section5"></a><img src="../img/5.png" />
                <div class="description">图片5描述</div>
            </div>
        </div>
    </div>
    <div id="button">
        <button type="button" id="left">向左</button>
        <button type="button" id="right">向右</button>
    </div>
    <div class="text-container">
        <div class="item-container">
            <div class="image-container"><img src="../images/1.jpg" alt=""></div>
            <div class="text-description">
                <h2>标题</h2>
                <p>这是一段文字描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec urna vel dolor
                    convallis tincidunt. Donec euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, vel aliquam
                    nisl nunc vel nisl.</p>
            </div>
        </div>
        <div class="item-container">
            <div class="image-container"><img src="../images/1.jpg" alt=""></div>
            <div class="text-description">
                <h2>标题</h2>
                <p>这是一段文字描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec urna vel dolor
                    convallis tincidunt. Donec euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, vel aliquam
                    nisl nunc vel nisl.</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var content = document.getElementById("content");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        content.style.marginLeft = 0 + "px";
        content.innerHTML = content.innerHTML + content.innerHTML + content.innerHTML;
        var key = "run";
        var dkey = "left";
        left.onclick = function () {
            dkey = "left";
        }
        right.onclick = function () {
            dkey = "right";
        }
        content.onmouseenter = function () {
            key = "stop";
        }
        content.onmouseleave = function () {
            key = "run";
        }
        dd();
        function dd() {
            var num = parseFloat(content.style.marginLeft);
            if (key == "run") {
                if (dkey == "left") {
                    num -= 0.5;
                    if (num <= -170 * 5) {
                        num = 0;
                    }
                } else {
                    num += 0.5;
                    if (num >= 0) {
                        num = -170 * 5;
                    }
                }
            }
            content.style.marginLeft = num + "px";
            setTimeout("dd()", 13);
        }//图片滚动
        function smoothScroll(target, duration) {
                var targetElement = document.querySelector(target);
                var targetPosition = targetElement.getBoundingClientRect().top;
                var startPosition = window.pageYOffset;
                var distance = targetPosition - startPosition;
                var startTime = null;

                function animation(currentTime) {
                    if (startTime === null) startTime = currentTime;
                    var timeElapsed = currentTime - startTime;
                    var run = ease(timeElapsed, startPosition, distance, duration);
                    window.scrollTo(0, run);
                    if (timeElapsed < duration) requestAnimationFrame(animation);
                }

                function ease(t, b, c, d) {
                    t /= d / 2;
                    if (t < 1) return c / 2 * t * t + b;
                    t--;
                    return -c / 2 * (t * (t - 2) - 1) + b;
                }

                requestAnimationFrame(animation);
            }

            document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    smoothScroll(this.getAttribute('href'), 800); // 800ms duration
                });
            });//平滑的内导航
    </script>
</body>

</html>